import '../assets/css/home.less'
import Menus from '../component/menu/menu';
import { Outlet } from 'react-router';
import { Layout } from 'antd';
import { Content, Header } from 'antd/es/layout/layout';
import Sider from 'antd/es/layout/Sider';
import HeaderHome from '../component/Home/HeaderHome';
const layoutStyle = {
    width: '100%',
    minHeight: '100vh',
    background: '#f7f5f5',
    minWidth: '1190px'
}
const headerStyle = {
    width: '100%',
    background: '#f4f4f4',
    height: '50px',
    padding: '0px 20px',
    borderBottom: '1px solid #e5e5e5'
}
const contentStyle = {
    display: 'flex',
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor:'#fff',
    minHeight: 'calc(100vh - 200px)',
    padding: '30px 30px'
}

function Home() {
    return (
        <div className="body">
            <Layout style={layoutStyle}>
                <Header style={headerStyle}>
                    <HeaderHome />
                </Header>
                <Layout>
                    <Sider width={95} style={{ backgroundColor: 'transparent' }}>
                        <Menus></Menus>
                    </Sider>
                    <Content style={contentStyle}>
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>
        </div>
    );
}
export default Home;